<template>
	<view class="content">
		<!-- logo -->
		<image src="../../static/img/屏幕截图 2024-10-08 173430.png" class="logo" mode="heightFix"></image>
		<view class="input-group">
			<input class="input" v-model="phone" placeholder="请输入电话号码" type="number" />
			<uni-icons class="icon left" type="phone-filled" color="#41b883" size="25px"></uni-icons>
			<uni-icons class="icon right" type="clear" size="22px" color="#35495e" @click="clear" />
		</view>
		<view class="input-group">
			<input class="input" v-model="pwd" placeholder="请输入密码" :password="hidePwd" />
			<uni-icons class="icon left" type="locked-filled" color="#41b883" size="25px"></uni-icons>
			<uni-icons class="icon right" size="22px" color="#35495e"
				:type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" @click="hidePwd = !hidePwd" />
		</view>
		<button class="btn" @click="login">登录</button>
		<navigator url="/pages/register/register" open-type="reLaunch" class="find">注册</navigator>
		<navigator url="/pages/find/find" open-type="reLaunch" class="find">找回密码</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				hidePwd: true,
				pwd: ""
			};
		},
		methods: {
			login() {
				const data = {
					phone: this.phone,
					password: this.pwd
				};
				console.log("Sending login request with data:", data); // 打印请求数据
				uni.request({
					url: 'http://localhost:8080/letter/users/login', // 确保路径正确
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: data,
					success: (res) => {
						console.log("Login response:", res); // 打印响应数据
						if (res.statusCode === 200) {
							if (res.data && res.data.code === 200) {
								const responseData = res.data.data;
								uni.showToast({
									title: '登录成功',
									icon: 'success',
									duration: 2000
								});
								// 把账号和用户ID存到本地
								uni.setStorageSync('phone', this.phone);
								uni.setStorageSync('userId', responseData);
								uni.navigateTo({
									url: '/pages/index/index'
								});
							} else {
								uni.showToast({
									title: '响应数据格式错误',
									icon: 'none',
									duration: 2000
								});
							}
						} else if (res.statusCode === 401) {
							uni.showToast({
								title: res.data.message || '用户名或密码错误',
								icon: 'none',
								duration: 2000
							});
						} else if (res.statusCode === 400) {
							uni.showToast({
								title: res.data.message || '请求参数错误',
								icon: 'none',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '登录失败',
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '请求失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			clear() {
				this.phone = '';
			}
		}
	}
</script>
<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: var(--status-bar-height, 0px);
	}

	.logo {
		width: 100px;
		/* 调整为合适的宽度 */
		margin: 20px 0;
		/* 上下边距 */
	}

	.input-group {
		position: relative;
		width: 90%;
		/* 输入框宽度 */
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		border: 1px solid #ccc;
		border-radius: 5px;
		overflow: hidden;
		/* 确保输入框内的元素不会溢出 */
	}

	.input {
		width: 100%;
		height: 40px;
		padding: 0 40px;
		/* 左右内边距 */
		border: none;
		/* 移除输入框的边框 */
		font-size: 16px;
		box-sizing: border-box;
		/* 确保内联元素的宽度包含padding和border */
	}

	.icon {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		/* 当鼠标悬停时显示手形光标 */
	}

	.left {
		left: 10px;
	}

	.right {
		right: 10px;
	}

	.btn {
		width: 90%;
		height: 40px;
		margin-top: 10px;
		background-color: #41b883;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		text-align: center;
		line-height: 40px;
	}

	.find {
		margin-top: 10px;
		color: #35495e;
		text-decoration: none;
	}
</style>